import React from 'react';

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as reviewAction from '../../../../actions/review.action' 
import {StepTab,StepItem} from '../../../../ui-components';

import SelfCheck from './SelfCheck';
import style from './style.styl';
import ReviewHeader from '../tool/ReviewHeader';


@connect(({ app, review }) => ({ app, review }), dispatch => ({actions: bindActionCreators({...reviewAction}, dispatch)}))
class SelfDetail extends React.Component {
  static contextTypes = {
    router: React.PropTypes.object
  }
  componentDidMount() {
    const {
      itemId
    } = this.props.routeParams;
    this.props.actions.fetchReviewItem(itemId, 'activities'); 
    this.props.actions.fetchReviewItemInvitations(itemId,'activities');
  }
  componentWillUnmount() {
    this.props.actions.clearReviewItem(); 
  }
  goBack = () => {
    const {
      reviewItem,
    } = this.props.review;
    this.context.router.push(`/review/index/${(reviewItem.reviewTemplate||{}).templateId}`);
  }
  render() {
    const {
      step = 1,
    } = this.props.location.query;
    const {
      reviewItem,
      reviewItemProjects,
      reviewItemInvitations,
    } = this.props.review;
    const {
      itemId
    } = this.props.routeParams;
    return (
      <div className={style['detail-page']}>
        <ReviewHeader title={reviewItem.revieweeUserProfile ? `${reviewItem.revieweeUserProfile.fullName}的自评` : ''} goBack={this.goBack}  />
        <SelfCheck 
          itemId={itemId}
          templateId={(reviewItem.reviewTemplate||{}).templateId}
          isSubmittable={reviewItem.isSubmittable}
          activityId={reviewItem.activityId} 
          projects={reviewItemProjects || []}
          question={reviewItem.questions || []}
          invitedUsers={reviewItemInvitations}
          detail
        />
      </div>
    );
  }
}

export default SelfDetail;
